<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>

<body>
    <div class="mt-4 p-5 bg-info text-white rounded">
        <h1>信息提示框 按钮 按钮组 嵌套按钮</h1>
    </div>
    <div class="container mt-4">
        <div class="alert alert-warning">
            <strong>警告</strong>设置警告信息
        </div>
    </div>

    <div class="container mt-4">
        <div class="alert alert-danger alert-dismissible fade show">
            <strong>失败</strong>失败信息
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            添加了 关闭框
        </div>

        <div class="alert alert-warning">
            <strong>警告</strong>设置警告信息
        </div>

        <div class="alert alert-primary">
            <strong>首选</strong>设置首选信息
        </div>

        <div class="alert alert-success">
            <strong>成功</strong>指定操作成功信息
        </div>

        <div class="alert alert-info">
            <strong>信息</strong>请注意这条信息<a href="http://www.baidu.com" class="alert-link" target="_blank">baidu</a> 添加了链接
        </div>

        <div class="alert alert-secondary">
            <strong>次要信息</strong>这是次要信息
        </div>
        <div class="alert alert-dark">
            <strong>深灰色</strong>这是深灰色信息
        </div>
        <div class="alert alert-light text-dark">
            <strong>亮色</strong>这是亮色信息
        </div>


        <p>五种按钮样式</p>
        <a href="#" class="btn btn-info" role="button">链接按钮</a>
        <button type="button" class="btn btn-info btn-outline-danger">按钮</button>
        <input type="button" class="btn btn-info" value="输入框按钮">
        <input type="submit" class="btn btn-info" value="提交按钮">
        <input type="reset" class="btn btn-info" value="重置按钮">

        <p>带边框的按钮</p>
        <button type="button" class="btn btn-outline-secondary">次级按钮</button>

        <p>设置按钮大小</p>
        <button type="button" class="btn btn-outline-primary btn-lg">大按钮</button>
        <button type="button" class="btn btn-outline-warning ">默认按钮</button>
        <button type="button" class="btn btn-outline-success btn-sm">小按钮</button>

        <p>块级按钮</p>
        <div class="d-grid">
            <button type="button" class="btn btn-info btn-block">块级按钮</button>
        </div>

        <p>多块级按钮</p>
        <div class="d-grid gap-2">
            <p>gap类可设置按钮间距</p>
            <button type="button" class="btn btn-info btn-block">块级按钮</button>
            <button type="button" class="btn btn-info btn-block">块级按钮2</button>
            <button type="button" class="btn btn-info btn-block">块级按钮3</button>
        </div>
        <p>按钮状态</p>
        <button type="button" class="btn btn-info ">正常按钮</button>
        <button type="button" class="btn btn-info active">点击后的按钮</button>
        <button type="button" class="btn btn-info" disabled>禁止的按钮</button>
        <a href="http://www.baidu.com" target="_blank" class="btn btn-primary disabled" title="baidu">禁止的链接按钮</a>

        <p>加载按钮</p>
        <button type="button" class="btn btn-info ">
            <span class="spinner-border spinner-border-sm"></span>
            加载中....
        </button>
        <button type="button" class="btn btn-info " disabled>
            <span class="spinner-grow spinner-grow-sm"></span>
            加载中....
        </button>

        <p>大按钮组</p>
        <div class="btn-group btn-group-lg">
            <button type="button" class="btn btn-primary">确定</button>
            <button type="button" class="btn btn-info">编辑</button>
            <button type="button" class="btn btn-danger">删除</button>
        </div>
        <p>默认按钮组</p>
        <div class="btn-group">
            <button type="button" class="btn btn-primary">确定</button>
            <button type="button" class="btn btn-info">编辑</button>
            <button type="button" class="btn btn-danger">删除</button>
        </div>
        <p>小按钮组</p>
        <div class="btn-group btn-group-sm">
            <button type="button" class="btn btn-primary">确定</button>
            <button type="button" class="btn btn-info">编辑</button>
            <button type="button" class="btn btn-danger">删除</button>
        </div>
        <p>垂直按钮组 + 并排显示俩</p>
        <div class="btn-group btn-group-sm btn-group-vertical">
            <button type="button" class="btn btn-primary">确定</button>
            <button type="button" class="btn btn-info">编辑</button>
            <button type="button" class="btn btn-danger">删除</button>
        </div>
        <div class="btn-group btn-group-sm btn-group-vertical">
            <button type="button" class="btn btn-primary">确定</button>
            <button type="button" class="btn btn-info">编辑</button>
            <button type="button" class="btn btn-danger">删除</button>
        </div>

        <p>按钮组下拉菜单</p>
        <div class="btn-group ">
            <button type="button" class="btn btn-primary">等级：30</button>
            <button type="button" class="btn btn-info">段位：黄铜</button>
            <div class="btn-group">
                <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown">历史段位</button>
                <ul class="dropdown-menu">
                    <li><a href="#" class="dropdown-item">第一赛季：王者</a></li>
                    <li><a href="#" class="dropdown-item">第二赛季：黄铜</a></li>
                    <li><a href="#" class="dropdown-item">第三赛季：白金</a></li>
                    <li><a href="#" class="dropdown-item">第四赛季：钻石</a></li>
                </ul>
            </div>

        </div>

        <p>垂直按钮组 带下拉框</p>
        <div class="btn-group btn-group-sm btn-group-vertical">
            <button type="button" class="btn btn-primary">名字：xxx</button>
            <button type="button" class="btn btn-info">age：12</button>
            <div class="btn-group">
                <button type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown">列表</button>
                <ul class="dropdown-menu">
                    <li><a href="#" class="dropdown-item">第一赛季：王者</a></li>
                    <li><a href="#" class="dropdown-item">第二赛季：黄铜</a></li>
                    <li><a href="#" class="dropdown-item">第三赛季：白金</a></li>
                    <li><a href="#" class="dropdown-item">第四赛季：钻石</a></li>
                </ul>
            </div>

        </div>
        

    </div>


</body>

</html>